<template>
	<view class="flex-col group">
		<view class="flex-col">
			<view class="section_1">
				<view class="left_tab_bar">
					<u-tabs name="name" ref="uTabs" height="50" active-color="#FF960C" inactive-color="#000"
						duration="0.2" :list="treeDataF" :current="currentF" @change="currentFChange" :is-scroll="true">
					</u-tabs>
				</view>
				<view class="flex-col group_1">
					<view class="flex-row section_2" @tap="show = true">
						<image src="/static/remote/583cec43cd3b95db50eda7f0b7ba6adf.png" class="image_1" />
						<text>筛选</text>
					</view>
				</view>
				<u-popup v-model="show" mode="bottom" height="70%" :closeable="true">
					<view class="pop_bg">
						<view class="title">分类筛选</view>
						<view class="main">
							<scroll-view scroll-y scroll-with-animation class="left_scroll">
								<view v-for="(item,index) in treeDataF" :key="index" class="u-tab-item"
									:class="index == leftSelect ? 'u-tab-item-active' : ''" @click="leftSelect = index">
									<text class="u-line-1">{{item.name}}</text>
								</view>
							</scroll-view>
							<block v-for="(item,index) in treeDataF" :key="index">
								<scroll-view scroll-y class="right_scroll" v-if="leftSelect==index">
									<view class="page-view">
										<view class="thumb-box" @tap="screen(index,'')">全部</view>
										<view class="thumb-box" v-for="son in item.children" :key="son.id"
											@tap="screen(index,son._id)">
											{{son.name}}
										</view>
									</view>
								</scroll-view>
							</block>
						</view>
					</view>
				</u-popup>
			</view>
			<view class="flex-col group_2">
				<view class="second_tabs">
					<view class="second_tabs_item" v-for="item in treeDataS" :key="item.name"
						:class="{select_item:currentS == item._id}" @tap="currentSChange(item._id)">
						{{item.name}}
					</view>
				</view>
				<view class="flex-col group_14">
					<z-paging ref="paging" v-model="reCourses" @query="getCourses" :empty-view-fixed="false"
						v-if="treeDataS.length > 0" :fixed="false" :hide-loading-more-when-no-more-by-limit="5">
						<view class="list-item flex-row" :key="item._id" v-for="item in reCourses"
							@click="openCourse(item._id)">
							<u-image :src="item.thumb" :lazy-load="true" class="image_11" mode="aspectFill">
							</u-image>
							<view class="right-group flex-col">
								<text class="text_11">{{ item.title }}</text>
								<view class="center-group flex-row">
									<view class="left-text-wrapper" :key="dynamicTag"
										v-for="dynamicTag in item.dynamicTags">{{dynamicTag}}</view>
								</view>
								<view class="justify-between">
									<text class="text_17">{{item.user_count}}人已购</text>
									<text class="text_19">{{rightText(item)}}</text>
								</view>
							</view>
						</view>
					</z-paging>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				flag: false, // 进入页面第一次旗帜

				reCourses: [], // 数据列表
				treeDataF: [], // 一级分类数据
				treeDataS: [], // 二级分类数据
				currentF: 0, // 一级选中项
				currentS: 0, // 二级选中项

				show: false, // 筛选弹框显隐
				leftSelect: 0, // 左侧分类选中项
				current_id: ''
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		computed: {
			rightText() {
				return (item) => {
					if (vk.pubfn.isNotNull(item.isBuy)) return '已购买'
					return '￥' + item.charge / 100
				}
			}
		},
		methods: {
			// 页面数据初始化函数
			async init(options) {
				if (options.id) {
					this.current_id = options.id
				}
				await that.getCategories()
				console.log(this.treeDataF)
				let index = this.treeDataF.findIndex(item => item._id === this.current_id)
				that.setTreeDataS(index)
				uni.$on('courseReload', () => {
					that.getCourses(1, 10)
				})
			},
			// 请求分类数据
			async getCategories() {
				await vk.callFunction({
					url: 'client/course/pub/categories',
					title: '获取分类中...',
					success(data) {
						let all_data = [{
							is_show: true,
							name: "全部",
							sort: 0,
							_id: ''
						}].concat(data.rows)
						let tree = vk.pubfn.arrayToTree(all_data, {
							id: "_id",
							parent_id: "parent_id",
							children: "children"
						});
						that.treeDataF = tree;
						that.treeDataF.forEach((item, index) => {
							if (item._id === that.current_id) {
								that.currentF = index
							}
						})
						that.setTreeDataS(0)
					}
				});
			},
			// 切换一级分类
			currentFChange(index) {
				this.currentF = index;
				that.setTreeDataS(index)
			},
			// 一级切换时更换二级列表
			setTreeDataS(index, sId) {
				that.treeDataS = [{
					name: '全部',
					_id: ''
				}]
				that.currentS = sId ? sId : ''
				if (that.treeDataF[index] && that.treeDataF[index].children) {
					that.treeDataS = [{
						name: '全部',
						_id: ''
					}, ...that.treeDataF[index].children]
				}
				that.currentSChange(that.currentS)
			},
			// 切换二级分类
			currentSChange(id) {
				this.currentS = id;
				if (!that.flag) return that.flag = true
				that.getCourses(1, 10)
			},
			// 获取当前分类所有课程
			getCourses(pageNo, pageSize) {
				// 下拉刷新时获取首页所有数据
				let data = {
					pageIndex: pageNo,
					pageSize: pageSize
				}
				if (that.currentS == '') {
					// 为空获取一级全部
					data.type = 1
					if (that.treeDataF[this.currentF]._id)
						data.category_id = that.treeDataF[this.currentF]._id
				} else {
					// 不为空获取对应二级
					data.type = 2
					data.category_id = this.currentS
				}
				if (uni.vk.callFunctionUtil.checkToken()) data['need_user_info'] = true
				if (pageNo == 1) this.reCourses = []
				vk.callFunction({
					url: 'client/course/pub/recommend_course',
					title: '获取课程中...',
					data: data,
					success(data) {
						that.$refs.paging.complete(data.rows);
					}
				});
			},
			// 推荐课程详情
			openCourse(id) {
				uni.vk.navigateTo('/uni_modules/uce-course/pages/detail/class-detail?_id=' + id, false);
			},
			// 筛选完成
			screen(fIndex, sId) {
				that.show = false
				this.$nextTick(() => {
					that.currentF = fIndex
					that.setTreeDataS(fIndex, sId)
				})
			}
		},
		onUnload() {
			uni.$off('courseReload')
		}
	}
</script>

<style lang="scss" scoped>
	.group {
		flex: 1 1 auto;
		overflow-y: auto;

		.section_1 {
			padding-bottom: 7rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 6rpx 12rpx 0px rgba(0, 0, 0, 0.1);
			position: relative;

			.left_tab_bar {
				width: 88%;
				height: 56rpx;
			}

			.text_1 {
				margin: 7rpx 0 6rpx;
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				line-height: 34rpx;
				white-space: nowrap;
			}

			.text_2 {
				margin: 7rpx 0 6rpx 50rpx;
				color: rgb(102, 102, 102);
				font-size: 28rpx;
				line-height: 34rpx;
				white-space: nowrap;
			}

			.text_3 {
				margin: 7rpx 0 6rpx 50rpx;
				color: rgb(102, 102, 102);
				font-size: 28rpx;
				line-height: 34rpx;
				white-space: nowrap;
			}

			.group_1 {
				margin-left: 50rpx;
				padding: 7rpx 0 6rpx;
				width: 100rpx;
				position: absolute;
				right: 20rpx;
				top: 0;
				background-image: linear-gradient(90deg,
						rgba(255, 255, 255, 0) 0%,
						rgba(255, 255, 255, 0) 3.05%,
						rgba(255, 255, 255, 0.98) 15.1%,
						rgb(255, 255, 255) 100%,
						rgb(255, 255, 255) 100%);
				z-index: 999;

				.image_1 {
					margin-left: 20rpx;
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.group_2 {
			padding-top: 20rpx;

			.second_tabs {
				display: flex;
				flex-wrap: wrap;
				padding: 0 20rpx;

				.second_tabs_item {
					color: black;
					font-size: 36rpx;
					white-space: nowrap;
					border-radius: 100rpx;
					padding: 10rpx 15rpx;
					text-align: center;
				}

				.select_item {
					background-color: rgb(255, 150, 12);
					color: rgb(255, 255, 255);
				}
			}

			.group_14 {
				margin-top: 25rpx;
				padding: 0 20rpx;
				/* #ifdef H5 */
				height: calc(100vh - 336rpx);
				/* #endif */
				/* #ifdef APP */
				height: calc(100vh - 146rpx);
				/* #endif */
				overflow: hidden;

				.list-item {
					padding-bottom: 40rpx;
					border-bottom: 1px solid #F0F0F0;

					&:not(:first-of-type) {
						margin-top: 40rpx;
					}

					.image_11 {
						border-radius: 8rpx;
						width: 284rpx !important;
						height: 182rpx !important;
					}

					.right-group {
						margin-left: 26rpx;
						flex: 1 1 auto;

						.text_11 {
							color: rgb(51, 51, 51);
							font-size: 30rpx;
							line-height: 35rpx;
							text-align: left;
						}

						.center-group {
							margin-top: 33rpx;
							color: rgb(255, 150, 12);
							font-size: 20rpx;
							line-height: 28rpx;
							white-space: nowrap;

							.left-text-wrapper {
								background-repeat: no-repeat;
								padding: 4rpx 14rpx;
								margin-right: 20rpx;
								background: rgba(255, 150, 12, 0.12);
								border: 1rpx solid #FF960C;
								border-radius: 16rpx;
							}
						}

						.text_17 {
							margin-top: 19rpx;
							color: rgb(153, 153, 153);
							font-size: 20rpx;
							line-height: 24rpx;
							white-space: nowrap;
						}

						.text_19 {
							color: rgb(246, 21, 21);
							font-size: 30rpx;
							margin-top: 4rpx;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}

	.pop_bg {
		padding: 30rpx;
		box-sizing: border-box;
		height: 100%;

		.title {
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
		}

		.main {
			height: calc(100% - 50rpx);
			margin-top: 10rpx;
			overflow: hidden;
			display: flex;

			.left_scroll {
				height: 100%;
				width: 30%;

				.u-tab-item {
					height: 110rpx;
					background: #f6f6f6;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #444;
					font-weight: 400;
					line-height: 1;
				}

				.u-tab-item-active {
					position: relative;
					color: #000;
					font-size: 26rpx;
					font-weight: 600;
					background-color: #FFFFFF;
				}

				.u-tab-item-active::before {
					content: "";
					position: absolute;
					border-left: 4px solid #FF960C;
					height: 32rpx;
					left: 0;
					top: 39rpx;
				}
			}

			.right_scroll {
				width: 70%;
				padding: 30rpx 0 0 20rpx;

				.page-view {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.thumb-box {
						background: #F5F5F5;
						border-radius: 6px;
						width: 47%;
						padding: 21rpx 0;
						text-align: center;
						margin-bottom: 30rpx;
					}
				}
			}
		}
	}
</style>